
import { memo,useEffect,useState} from 'react';
import { Modal,Form,Input } from 'antd';
import { Tree } from 'antd';
import type { TreeDataNode, TreeProps } from 'antd';
import { AnyMxRecord } from 'dns';
import { useForm } from 'antd/es/form/Form';
interface IProps {
  open: boolean;
  close: () => void;
  role:AnyObject
}
const fieldNames={ title:"name", key:"id"}
const treeData: any= [
  {
      "id": 1,
      "name": "楼栋管理",
      "ico": "icon-guanyuwomen4",
      "url": "/building/list",
      "pid": 0,
      "sort": 1,
      "checked": 0,
      "postion": "top",
      "children": [
          {
              "id": 32,
              "name": "删除楼栋",
              "ico": null,
              "url": null,
              "pid": 1,
              "sort": 0,
              "checked": 0,
              "postion": null,
              "children": null
          },
          {
              "id": 31,
              "name": "查看楼栋信息",
              "ico": null,
              "url": null,
              "pid": 1,
              "sort": 0,
              "checked": 0,
              "postion": null,
              "children": null
          },
          {
              "id": 30,
              "name": "修改楼栋",
              "ico": null,
              "url": null,
              "pid": 1,
              "sort": 0,
              "checked": 0,
              "postion": null,
              "children": null
          },
          {
              "id": 29,
              "name": "添加楼栋",
              "ico": null,
              "url": null,
              "pid": 1,
              "sort": 0,
              "checked": 0,
              "postion": null,
              "children": null
          }
      ]
  },
  {
      "id": 2,
      "name": "房间管理",
      "ico": null,
      "url": "/house/list",
      "pid": 0,
      "sort": 2,
      "checked": 0,
      "postion": "top",
      "children": [
          {
              "id": 36,
              "name": "查看房间",
              "ico": null,
              "url": null,
              "pid": 2,
              "sort": 0,
              "checked": 0,
              "postion": null,
              "children": null
          },
          {
              "id": 35,
              "name": "删除房间",
              "ico": null,
              "url": null,
              "pid": 2,
              "sort": 0,
              "checked": 0,
              "postion": null,
              "children": null
          },
          {
              "id": 34,
              "name": "修改房间",
              "ico": null,
              "url": null,
              "pid": 2,
              "sort": 0,
              "checked": 0,
              "postion": null,
              "children": null
          },
          {
              "id": 33,
              "name": "添加房间",
              "ico": null,
              "url": null,
              "pid": 2,
              "sort": 0,
              "checked": 0,
              "postion": null,
              "children": null
          }
      ]
  },
  {
      "id": 3,
      "name": "居民管理",
      "ico": null,
      "url": "/userinfo/listt",
      "pid": 0,
      "sort": 3,
      "checked": 0,
      "postion": "left",
      "children": null
  },
  {
      "id": 4,
      "name": "报修管理",
      "ico": null,
      "url": "/repairs/list",
      "pid": 0,
      "sort": 4,
      "checked": 0,
      "postion": "left",
      "children": null
  },
  {
      "id": 5,
      "name": "投诉管理",
      "ico": "icon-kecheng",
      "url": "/questions/list",
      "pid": 0,
      "sort": 5,
      "checked": 0,
      "postion": "left",
      "children": null
  },
  {
      "id": 6,
      "name": "职员信息",
      "ico": null,
      "url": "/staff/list",
      "pid": 0,
      "sort": 6,
      "checked": 0,
      "postion": "left",
      "children": null
  },
  {
      "id": 7,
      "name": "公告管理",
      "ico": null,
      "url": "/news/list",
      "pid": 0,
      "sort": 7,
      "checked": 0,
      "postion": "left",
      "children": null
  },
  {
      "id": 8,
      "name": "门店管理",
      "ico": "icon-shiziduiwu",
      "url": "/stores/list",
      "pid": 0,
      "sort": 8,
      "checked": 0,
      "postion": "left",
      "children": null
  },
  {
      "id": 9,
      "name": "管理员管理",
      "ico": null,
      "url": "/administrator/list",
      "pid": 0,
      "sort": 9,
      "checked": 0,
      "postion": "top",
      "children": null
  },
  {
      "id": 10,
      "name": "角色管理管理",
      "ico": null,
      "url": "/administratorrole/list",
      "pid": 0,
      "sort": 10,
      "checked": 0,
      "postion": "top",
      "children": null
  },
  {
      "id": 11,
      "name": "图片管理",
      "ico": "icon-tupian",
      "url": "/advertisement/list",
      "pid": 0,
      "sort": 11,
      "checked": 0,
      "postion": "left",
      "children": null
  }
];

const Edit = memo((props: IProps) => {

  const [form] = Form.useForm();
  //表单提交
  const onFinish=(values:AnyObject)=>{

    
    let data={
      id: props.role.id,
      name:values.name,
      menus: checkedKeys.map(item=>({id:item}))
  }

    console.log("调接口",data);
    props.close();
    
  }

  const handleOk=()=>{
         //调接口

         form.submit();
        
  }
 
 
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);

  useEffect(()=>{

    setTimeout(()=>{
      setCheckedKeys([34,33]);
    },1000)

  },[])
 

  const onCheck: TreeProps['onCheck'] = (checkedKeysValue) => {
    console.log('onCheck', checkedKeysValue);
    setCheckedKeys(checkedKeysValue as React.Key[]);
  };

 


  return <Modal
    title="添加角色"
    open={props.open}
    onCancel={props.close}
    onOk={handleOk}
  >
  <Form
    name="basic"
    autoComplete="off"
    onFinish={onFinish}
    form={form}
  >
    <Form.Item
      label="角色名称"
      name="name"
      rules={[{ required: true, message: '请输入角色名称' }]}
    >
      <Input />
    </Form.Item>
    <Form.Item label="权限">
      <Tree
      fieldNames={fieldNames}
      checkable
      // onExpand={onExpand}
      // expandedKeys={expandedKeys}
      // autoExpandParent={autoExpandParent}
      onCheck={onCheck}
      checkedKeys={checkedKeys}
      // onSelect={onSelect}
      // selectedKeys={selectedKeys}
      treeData={treeData}
    />
    </Form.Item>
    </Form>

  </Modal>
})

export default Edit;
